import React from 'react';
import styles from './SelectedItemsModal.module.css';

// 项目类型定义
export interface SelectedItem {
  id: number;
  name: string;
  price: number;
  quantity?: number; // 药品有数量，检查/检验没有
  type: 'medicine' | 'check' | 'test';
  tags: string[];
  unit: string; // 单位：剂、盒、次等
  isPrescription?: boolean;
}

interface SelectedItemsModalProps {
  isOpen: boolean;
  onClose: () => void;
  items: SelectedItem[];
  onUpdateQuantity: (id: number, quantity: number) => void;
  onRemoveItem: (id: number) => void;
  onClearAll: () => void;
  onSubmit: () => void;
}

const SelectedItemsModal: React.FC<SelectedItemsModalProps> = ({
  isOpen,
  onClose,
  items,
  onUpdateQuantity,
  onRemoveItem,
  onClearAll,
  onSubmit
}) => {
  // 计算总价
  const totalPrice = items.reduce((sum, item) => {
    return sum + (item.price * (item.quantity || 1));
  }, 0);

  // 计算总项目数
  const totalItems = items.reduce((sum, item) => {
    return sum + (item.quantity || 1);
  }, 0);



  // 获取项目类型颜色
  const getTypeColor = (type: string) => {
    switch (type) {
      case 'medicine':
        return '#1890ff';
      case 'check':
        return '#fa8c16';
      case 'test':
        return '#f5222d';
      default:
        return '#666';
    }
  };

  if (!isOpen) return null;

  return (
    <div className={styles.overlay} onClick={onClose}>
      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
        {/* 模态框头部 */}
        <div className={styles.header}>
          <div className={styles.title}>已选项目</div>
          <div className={styles.clearAllBtn} onClick={onClearAll}>
            全部清空
          </div>
        </div>

        {/* 项目列表 */}
        <div className={styles.content}>
          {items.length > 0 ? (
            items.map((item) => (
              <div key={item.id} className={styles.item}>
           

                {/* 中间信息 */}
                <div className={styles.itemInfo}>
                  <div className={styles.itemName}>{item.name}</div>
                  <div className={styles.itemPrice}>
                    ¥{item.price.toFixed(2)}/{item.unit}
                  </div>
                  {item.tags && item.tags.length > 0 && (
                    <div className={styles.itemTags}>
                      {item.tags.map((tag, index) => (
                        <span 
                          key={index} 
                          className={`${styles.tag} ${
                            tag.includes('处方') ? styles.prescriptionTag : styles.limitTag
                          }`}
                        >
                          {tag}
                        </span>
                      ))}
                    </div>
                  )}
                </div>

                {/* 右侧操作 */}
                <div className={styles.itemActions}>
                  {item.type === 'medicine' ? (
                    // 药品数量选择器
                    <div className={styles.quantitySelector}>
                      <button
                        className={styles.quantityBtn}
                        onClick={() => onUpdateQuantity(item.id, (item.quantity || 1) - 1)}
                        disabled={!item.quantity || item.quantity <= 1}
                      >
                        -
                      </button>
                      <span className={styles.quantityValue}>
                        {item.quantity || 1}
                      </span>
                      <button
                        className={styles.quantityBtn}
                        onClick={() => onUpdateQuantity(item.id, (item.quantity || 1) + 1)}
                      >
                        +
                      </button>
                    </div>
                  ) : (
                    // 检查/检验的选中状态
                    <div className={styles.checkboxContainer}>
                      <div className={styles.checkbox}>
                        <span className={styles.checkmark}>✓</span>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            ))
          ) : (
            <div className={styles.emptyState}>
              <div className={styles.emptyIcon}>📋</div>
              <div className={styles.emptyText}>暂无已选项目</div>
              <div className={styles.emptySubText}>请先选择要申请的项目</div>
            </div>
          )}
        </div>

        {/* 底部汇总栏 */}
        {items.length > 0 && (
          <div className={styles.footer}>
            <div className={styles.summary}>
              <div className={styles.summaryIcon}>📋</div>
              <div className={styles.summaryText}>
                <div className={styles.summaryCount}>已选 {totalItems} 项</div>
                <div className={styles.summaryTotal}>合计: ¥{totalPrice.toFixed(2)}</div>
              </div>
            </div>
            <button className={styles.submitBtn} onClick={onSubmit}>
              提交
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default SelectedItemsModal;
